<template>
	<view class="header-bg pb-safe-area"
	:style="WEBCONFIG?.page_bg_image?'--bg-image-url:url('+WEBCONFIG?.page_bg_image+');background-size: 100% 100%;':''">
		<view class="p-4">
			<swiper class="banner-swiper mb-4" circular v-if="bannerList.length > 0" indicator-dots autoplay>
				<swiper-item v-for="item in bannerList" :key="item.id" @click="$page.ads(item)">
					<image :src="item.image" mode="scaleToFill" class="banner-swiper-image" />
				</swiper-item>
			</swiper>
			<view class="flex bg-white flex-center mb-4 rounded-2" v-if="noticeList.length > 0">
				<view class="px-4">
					<image src="@/static/notice-icon.png" class="notice-icon" />
				</view>
				<swiper class="notify-swiper flex-1" autoplay :interval="3000" :duration="1000" vertical circular>
					<swiper-item class="" v-for="item in noticeList" :key="item.id">
						<view class="h9 font-weight-600 notify-swiper-title"
							@tap="$page.open('/pages/article/content?id=' + item.id)">{{ item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex flex-center mb-4 rounded-2 py-4" v-if="WEBCONFIG?.wechat_mp_audit">
				<view class="mr-4">
					<image src="@/static/icon-1.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="text-primary font-weight-600 pb-2">{{ gameInfo.name }}</view>
				</view>
			</view>
			<view class="flex flex-center mb-4 rounded-2 py-4" v-else>
				<view class="mr-4">
					<image src="@/static/icon-1.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="text-primary font-weight-600 pb-2">{{ gameInfo.name }}</view>
					<view class="h10 text-primary-light-1">开通会员畅玩全站</view>
				</view>
				<uni-icons type="vip-filled" class="vip-icon" size="16" color="var(--xl-primary)"></uni-icons>
				<view class="h9 text-primary-light-1 font-weight-600 py-4 pr-4 pl-2" @tap="handleClickVipMember">
					{{ WEBCONFIG?.vip_member_name }}</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="flex flex-center mb-4 rounded-2 py-4">
				<view class="mr-4">
					<image src="@/static/icon-1.png" class="block-icon" mode="aspectFit" />
				</view>
				<view class="flex-1">
					<view class="text-primary font-weight-600 pb-2">{{ gameInfo.name }}</view>
					<view class="h10 text-primary-light-1">开通会员畅玩全站</view>
				</view>
				<uni-icons type="vip-filled" class="vip-icon" size="16" color="var(--xl-primary)"></uni-icons>
				<view class="h9 text-primary-light-1 font-weight-600 py-4 pr-4 pl-2" @tap="handleClickVipMember">
					{{ WEBCONFIG?.vip_member_name }}</view>
			</view>
			<!-- #endif -->
			<x-vip-grid :list="gameInfo.VipList" :game="search.game" @selected="handleClickVipItem" />
			<view v-if="moreGameList.length > 0 && WEBCONFIG?.more_game">
				<view class="flex flex-center mb-4 rounded-2">
					<view class="mr-4">
						<image src="@/static/icon-2.png" class="block-icon" mode="aspectFit" />
					</view>
					<view class="flex-1 text-primary font-weight-600 py-4">更多玩法</view>
				</view>
				<view class="grid grid-gap-4 bg-white rounded-4">
					<view class="grid-column-6 rounded-4 py-4 flex flex-center flex-column" v-for="item in moreGameList" :key="item.id"
						@click="$page.ads(item)">
						<image :src="item.image" class="more-game-icon" />
						<view class="h10 mt-2">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</view>
		<x-pay ref="xPayRef" @success="getGameInfo" @vipmember="handleClickVipMember" auto-hide-tab-bar/>
		<x-login ref="xLoginRef" @success="getGameInfo" auto-hide-tab-bar/>
		<x-vip ref="xVipRef" @success="getGameInfo" auto-hide-tab-bar/>
		<x-popup v-model="showAlert" top="30vh" auto-hide-tab-bar>
			<view class="h6 font-weight-600 p-4 text-center">{{ AlertContent.title }}</view>
			<view class="flex-1 flex flex-column px-4 pb-safe-area">
				<mp-html :content="AlertContent.content" selectable class="text-wrap content"></mp-html>
			</view>
		</x-popup>
		<x-tabbar page="pages/index/index" />
	</view>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { onLoad, onShow,onShareAppMessage,onShareTimeline } from "@dcloudio/uni-app";
import { $page, $message, $http, login, replaceUrlParam, useStorage } from '@/utils';
import { useUserStore, useWebConfigStore, useRefs } from '@/stores';
const storeage = useStorage();
const xPayRef = ref();
const xVipRef = ref();
const xLoginRef = ref();
const webConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(webConfigStore);
const userStore = useUserStore();
const { USERINFO } = useRefs(userStore);
let action: string = '';
const search = ref({
	game:WEBCONFIG.value?.home_default_game
});
const noticeList = ref([]);
const bannerList = ref([]);
const moreGameList = ref([]);
const gameInfo = ref({
	name: '',
	VipList: []
});
onLoad((options: any) => {
	if (options.action) {
		action = options.action;
	}
	if (options.game) {
		search.value.game = options.game;
	}
	getBanner();
	getNoticeList();
	getMoreGame();
	getAlert();
})
onShow(() => {
	uni.hideTabBar();
	$page.title(gameInfo.value.name);
	// #ifdef H5
	const appid = useStorage().get('APPID');
	replaceUrlParam('appid', appid);
	// #endif
	getGameInfo();
})
onShareAppMessage(()=>{
	return $page.shareMessage({
		title: gameInfo.value.name,
		path: `/pages/index/index?game=${search.value.game}`
	})
})
onShareTimeline(()=>{
	return $page.shareTimeline({
		title: gameInfo.value.name,
		path: `/pages/index/index?game=${search.value.game}`
	})
})
const getGameInfo = () => {
	$http.get('Game/index', {
		data: search.value
	})
		.then((res: any) => {
			if (res.code === $http.ResponseCode.SUCCESS) {
				gameInfo.value = res.data;
				checkAction();
				nextTick(() => {
					$page.title(gameInfo.value.name);
				})
			}
		}).catch((err: any) => {
		})
}
const checkAction = () => {
	if (action) {
		const [a, id] = action.split('-');
		action = '';
		switch (a) {
			case 'vip':
				if (id != 'custom') {
					const item = VipList.value.find((item: any) => item.id === Number(id));
					if (item) {
						handleClickVipItem(item);
					}
				}
				break;
			case 'vipmember':
				handleClickVipMember();
				break;
		}
	}
}
const handleClickVipItem = (item: any) => {
	if (item.unlock) {
		$page.open(`/pages/${item.page}/${item.game}?id=${item.id}`)
	} else {
		if (item.page === 'vipmember') {
			handleClickVipMember();
		} else if (userStore.hasLogin()) {
			xPayRef.value.show({
				type: 'vip',
				alias_id: item.id,
				price: item.price,
				title: item.game_name + ' - ' + item.title,
				data: item
			});
		} else {
			login({
				redirect: 'home',
				game: item.game,
				action: `vip-${item.id}`
			}, xLoginRef);
		}
	}
}
const handleClickVipMember = () => {
	if (userStore.hasLogin()) {
		if (USERINFO.vip_state && !USERINFO.vip_time) {
			return $message.success('您当前已是永久会员，无需再次购买');
		}
		xVipRef.value.show();
	} else {
		login({
			redirect: 'home',
			action: 'vipmember'
		}, xLoginRef);
	}
}
const getNoticeList = () => {
	$http.get('Article/getSelect', {
		data: {
			alias: 'notice'
		}
	}).then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			noticeList.value = res.data;
		}
	})
}
const getBanner = () => {
	$http.get('Ads/list', {
		data: {
			position: 'banner',
			game: search.value.game
		}
	}).then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			bannerList.value = res.data;
		}
	})
}
const getMoreGame = () => {
	$http.get('Ads/list', {
		data: {
			position: 'home_more'
		}
	}).then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			moreGameList.value = res.data;
		}
	})
}
const AlertContent = ref({
	title: '',
	content: ''
});
const showAlert = ref(false);
const getAlert = () => {
	$http.get('Article/getContentByAlias', {
		data: {
			alias: 'alert'
		}
	}).then((res: any) => {
		if (res.code === $http.ResponseCode.SUCCESS) {
			if (storeage.get('alert')) {
				return;
			}
			showAlert.value = true;
			AlertContent.value = res.data;
			storeage.set('alert', 1, 3600);
		}
	})
}
</script>
<style lang="scss" scoped>
.header-bg {
	min-height: calc(100vh - var(--window-bottom));
	padding-top: max(var(--window-top), 50px);
	// #ifdef MP-WEIXIN
	padding-top: max(var(--window-top), 80px);
	// #endif
	box-sizing: border-box;
	--bg-image-url: url(@/static/header-img.png);
	background-image: var(--bg-image-url);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: var(--xl-grey);
}

.banner-swiper {
	width: 100%;
	height: 300rpx;

	&-image {
		width: 100%;
		height: 100%;
	}

	.uni-swiper-dot.uni-swiper-dot-active {
		background-color: var(--xl-primary);
	}
}

.notify-swiper {
	height: 80rpx;
	background-color: var(--xl-bg-white);

	&-title {
		line-height: 80rpx;
	}
}

.notice-icon {
	width: 26px;
	height: 26px;
}

.block-icon {
	width: 45px;
	height: 45px;
}

.more-game-icon {
	width: 55px;
	height: 55px;
}

.vip-icon {
	width: 20px;
	height: 20px;
	animation: vip 1s infinite;
}

@keyframes vip {
	0% {
		transform: scale(1) rotate(0deg);
	}

	50% {
		transform: scale(1.5) rotate(-25deg);
	}

	100% {
		transform: scale(1) rotate(0deg);
	}
}
</style>